<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style lang="scss">
.attachment_imgBox {
  width: 80px;
  height: 80px;
  text-align: center;
  cursor: pointer;
  border: dotted 1px rgba($color: #000000, $alpha: 0.1);
  background-color: rgba(0, 0, 0, 0.02);
  .attachmentImg {
    width: 74px;
    height: 74px;
    margin: 3px auto;
  }
  .el-icon-camera,
  .el-icon-video-camera,
  .el-icon-video-camera-solid {
    line-height: 80px;
    font-size: 20px;
    color: rgba($color: #000000, $alpha: 0.3);
  }
}
.prohibited .el-dialog__body {
  text-align: center;
}
.attachment {
  .el-dialog {
    .el-table {
      .el-table__body-wrapper.is-scrolling-none {
        height: 480px !important;
      }
    }
  }
}
#app {
  .el-pagination {
    margin-bottom: 40px;
  }
}
// 树形结构 checkbox样式
#app {
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #f84311;
    border-color: #f84311;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #f84311;
  }
  .el-checkbox__inner:hover {
    border-color: #f84311;
  }
}
// checkbox样式
#app {
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #f84311;
  }
}
// radio样式
#app {
  .el-radio-group {
    line-height: 40px;
    font-size: 1px;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #f84311;
    background-color: #f84311;
  }
  .el-radio__inner:hover {
    border-color: #f84311;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #f84311;
  }
}
// 翻页样式
#app {
  .el-pager li.active,
  .el-pager li:hover {
    color: #f84311;
  }
}
#app {
  .el-tabs__item.is-active {
    color: #f84311;
  }
  .el-tabs__item:hover {
    color: #f84311;
  }
}
//tab切换卡片样式
#tabcard.el-tabs--card {
  .el-tabs__header {
    margin-bottom: 0;
    border-bottom: 0;
    .el-tabs__nav {
      border: none;
    }
    .el-tabs__item {
      border-left: none;
      background-color: #eee;
      margin-right: 5px;
    }
    .el-tabs__item.is-active {
      background-color: #fff;
      color: #f84311;
    }
    .el-tabs__item:hover {
      color: #f84311;
    }
  }

  .el-tabs__content {
    padding-top: 20px;
    background-color: #fff;
  }
}
//选择附件按钮
#app {
  .el-tabs__active-bar {
    background-color: #f84311;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
  .attachmentBtn {
    display: flex;
    margin-bottom: 15px;
    .avatar-uploader {
      margin-right: 15px;
    }
  }
  .imgBox {
    width: 200px;
    height: 140px;
    border-radius: 5px;
    border: solid 1px #dcdfe6;
    position: relative;
    .attachmentImg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 180px;
      max-height: 120px;
    }
  }

  .attachment .el-dialog {
    height: 600px;
    border-radius: 0;
    .el-dialog__header {
      border-radius: 0 !important;
      padding-bottom: 20px;
    }
    .el-dialog__body {
      padding: 0 20px;
      height: 500px;
    }
    .el-table {
      .attachmentImg {
        width: 60px;
        height: 60px;
      }
    }
  }
}
// ::-webkit-scrollbar {
//     width: 4px;
//     /*height: 4px;*/
// }
// ::-webkit-scrollbar-thumb {
//     border-radius: 10px;
//     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//     background: rgba(0,0,0,0.2);
// }
// ::-webkit-scrollbar-track {
//     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//     border-radius: 0;
//     background: rgba(0,0,0,0.1);
// }
.el-message-box {
  //默认按钮 提示框
  .el-button--primary {
    color: #fff;
    background-color: #f84311;
    border-color: #edeef3;
    border-radius: 30px;
  }
  .el-button--primary.is-active,
  .el-button--primary:active {
    color: #fff;
    background-color: #f84311;
    border-color: #edeef3;
  }
  .el-button {
    border-radius: 30px;
  }
  .el-message-box__headerbtn:focus .el-message-box__close,
  .el-message-box__headerbtn:hover .el-message-box__close {
    color: #f84311;
  }
}

#app {
  .el-button--mini {
    padding: 8px 15px;
    font-size: 12px;
  }
  .el-button {
    border-radius: 20px;
  }
  //默认按钮
  .el-button--primary {
    color: #fff;
    background-color: #f84311;
    border-color: #edeef3;
    border-radius: 30px;
  }
  // 深蓝色
  .blue.el-button--primary {
    background-color: #003049;
  }
  // 浅橙色
  .orange.el-button--primary {
    background-color: #fe872b;
  }
  //黄色
  .yellow.el-button--primary {
    background-color: #f9b633;
  }
  //天蓝色
  .tianBlue.el-button--primary {
    background-color: #0089d0;
  }
  //紫色
  .purple.el-button--primary {
    background-color: #8a5df8;
  }
  .tianBlue.mini.el-button--primary {
    background-color: #0089d0;
    padding: 8px 15px;
    font-size: 12px;
  }
  .blue.mini.el-button--primary {
    background-color: #003049;
    padding: 8px 15px;
    font-size: 12px;
  }
  .exit.el-button {
    height: 36px;
    width: 100px;
    padding: 0;
    font-size: 14px;
  }
  //保存按钮样式
  .save.el-button--primary {
    height: 40px;
    width: 100px;
    padding: 0;
    font-size: 14px;
  }
  .add.six.el-button--primary {
    width: 144px;
  }
  .add.five.el-button--primary {
    width: 130px;
  }
  .add.four.el-button--primary {
    width: 120px;
  }

  // 新增按钮样式
  .add.el-button--primary {
    border-radius: 19px;
    background-color: #f84311;
    border-color: #edeef3;
    height: 36px;
    width: 100px;
    padding: 0;
    font-size: 14px;
    .el-icon-plus {
      font-weight: 600;
    }
  }
  // 开关按钮的激活颜色
  .el-switch__label {
    color: #666;
  }
  .el-switch__label.is-active {
    color: #f84311;
  }
  .el-button.edit {
    color: #fff;
    background-color: #f84311;
    border-color: #edeef3;
    border-radius: 16px;
  }
  .el-button.dele {
    color: #333;
    background-color: #dddddd;
    border-color: #edeef3;
    border-radius: 16px;
  }
}

/* 返回上一页 */
.back {
  position: absolute;
  top: 0px;
  right: 0px;
}
#app .el-button--primary.back {
  border-radius: 19px;
  background-color: transparent;
  border-color: #f84311;
  color: #f84311;
}
#app .el-form .btn {
  text-align: center;
}
// 左侧边栏
#app .sidebar-container {
  top: 50px;
  padding-top: 15px;
  background-color: #fff;
  border-right: solid 1px #edeef3;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}
#app .navbar {
  width: calc(100% + 210px);
  margin-left: -210px;
  z-index: 2000;
  position: fixed;
}
// #app .sidebar-container .el-submenu .el-menu-item{
//   background-color: #d5ebfc !important;
// }
#app .el-menu {
  background-color: transparent !important;
  color: #000 !important;
}
#app .el-menu-item,
.el-submenu__title {
  background-color: transparent !important;
}

#app .el-menu-item {
  background-color: #fff !important;
  color: #000 !important;
}

// 折叠菜单
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
#app .sidebar-container .el-submenu .el-menu-item {
  background-color: rgb(242, 244, 246) !important;
  color: #000 !important;
}
#app .el-menu .nest-menu {
  border-bottom: solid 1px #e5e6eb;
}
#app .el-menu .nest-menu:last-child {
  border-bottom: none;
}

#app .sidebar-container .is-active > .el-submenu__title {
  background-color: #fff !important;
  color: #000 !important;
}
#app .el-submenu .el-submenu__title {
  background-color: #fff !important;
  color: #000 !important;
}
// hover菜单
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
#app .sidebar-container .el-submenu .el-menu-item:hover {
  background-color: #e5eaec !important;
  // color: #1047f7 !important;
}
#app .sidebar-container .submenu-title-noDropdown:hover,
#app .sidebar-container .el-submenu__title:hover {
  background-color: #e5eaec !important;
}
#app .hideSidebar .submenu-title-noDropdown .el-tooltip,
#app .hideSidebar .el-submenu > .el-submenu__title {
  text-align: center;
}
// 选中菜单
#app .sidebar-container .submenu-title-noDropdown.is-active {
  color: #fff !important;
  background-color: #003049 !important;
}
#app .sidebar-container .el-submenu .el-menu-item.is-active {
  background-color: #003049 !important;
  color: #fff !important;
}
.el-submenu__icon-arrow.el-icon-arrow-down {
  color: #909399 !important;
}
#app .main-container {
  background: #f5f6fa;
}
#app h3.title {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 26px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 10px;
  display: none;
}
#app h3.title span {
  display: inline-block;
  width: 4px;
  height: 20px;
  margin-right: 18px;
  border-radius: 4px;
  background-color: #f84311;
  vertical-align: middle;
}
#app h4.title {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #333333;
  margin-bottom: 10px;
}
#app h4.title span {
  display: inline-block;
  width: 4px;
  height: 20px;
  margin-right: 18px;
  border-radius: 4px;
  background-color: #f84311;
  vertical-align: middle;
}
#app .container {
  padding: 20px 20px;
  background-color: #f5f6fa;
  margin-bottom: 40px;
  .search {
    margin-bottom: 20px;
    padding: 20px 30px 0px;
  }
}
* {
  margin: 0;
  padding: 0;
}
#app .el-table thead tr,
#app .el-table thead th {
  font-weight: normal;
  color: #000;
  background-color: #edeef3;
}
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #e1e4ea;
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #f5f6fa;
}
.el-dropdown-menu {
  padding: 0;
}
.el-dropdown-menu__item--divided {
  border-top: none;
  height: 30px;
}
.el-dropdown-menu__item--divided:before {
  display: none;
  margin-top: 0;
}
.el-dropdown-menu__item {
  height: 40px;
  line-height: 40px;
}
</style>
